<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM的介绍</title>
</head>
<body>
    <!-- 
        DOM:document object model
        提供一些属性和方法来操作文档结构（html标签）
        BOM的顶级对象 window
        DOW的顶级对象 document
        获取元素的方法：
        1.document.getElementsByTagName('标签名')
        返回值：满足条件的一类型标签集合（伪数组）
        如果需要使用标签，需要通过下标来获取标签
        2.document.getElementBy('id名')
        返回值：一个html对象（标签）
        3.document.getElementByClassName('calss名')
        返回值：一个满足条件的html集合（为数组）
        如果需要使用标签 需要通过下标来获取标签
        4.document.querySelector('写css的选择器')
        返回值：html标签，当页面由多个可以满足的条件，返回第一个满足的
        5.docunment.querySelectorAll('写css的选择器')获取的元素集合可以使用forEach这个方法
        返回值：nodeList 以一个伪数组的形式返回一个节点的列表
        6.使用document.getElementByClassName()获取HTML集合
        和docunment.querySelectorAll()获取元素的集合的区别
        7.document.querySelectorAll()获取的元素集合可以使用forEach这个方法

       7.简单操作dom元素的属性
       （1）innerHTML获取元素的内容（文本在，注释，标签..）
        (2)innerText 获取元素的文本
       （3）style 给元素添加在行内中也可以获取行内的样式
        (4)ClassName 获取class名字或者设置元素的类名（box.Clasbox.ClassName='j45'sName='j45'）
        (5)id 设置或者获取id名
        (6)dir    console.dir(box)把标签以对象的形式打印在控制台
         给元素自定义的属性不能通过.的形式来 获取
        (7)getAttribute('属性'，'属性值')自定义获取属性或者
         设置属性和属性值会添加在html标签上面
         *获取input的value值，只能input.value 来获取
        (8)removeAttribute('属性') 
         把此属性从标签中移除
        (二)
        1.获取页面中特殊的标签
        document.body
        document.head
        document.title 获取的是标签的内容
        document.docunmentElement 获取html标签
        document.getElementsByName('属性值')
        (三)
        关系节点的获取
        1.节点的分类：
        （1）元素节点 就是标签
        （2）文本节点 文本内容
        （3）属性节点  标签中的属性
        （4）注释节点
        1.childNodes获取元素的所有子节点（文本节点，元素节点，注释节点）
        2.children 获取所有子元素节点返回一个元素集合
        3.firstchild获取元素的第一个子节点（文本节点，元素节点，注释节点）
        4.firstElementchild获取元素的第一个元素的子节点
        5.lastchild 获取元素中最后一个子节点
        6.lastElementChild获取元素最后一个子元素节点
        通过子元素获取父元素：
        parentNode/parenElenment 获取父元素
        通过原来获取他的兄弟元素
        1.previousSibling 获取上一个兄弟节点（文本，元素，注释）
        2.previousElementSibling白领获取上一个兄弟节点
        3.nextSibling 获取下一个兄弟节点
        4.nextElementSibling 获取下一个兄弟元素节点
     (四)
     1.判断节点的类型
     文本/元素/注释/属性
    （1）nodeType 判断节点的类型
     (2)nodeType值为1表示元素节点
     (3)nodeType值为2表示属性节点
     (3)nodeType值为3表示文本节点
     (4)nodeType值为8表示注释节点
     (5)attributes 获取元素属性的集合
    -->

     <span></span>
     <div id="div1"></div>
     <script>
var span=document.getElementsByTagName('span');
console.log(span[0]);
var div1=document.getElementById('div1');
console.log(div1)
     </script>
    
</body>
</html>